<template>
  <el-dialog v-model="localVisible" :title="title" :width="width" :before-close="handleClose">
    <!-- 这里可以放置你的对话框内容 -->
    <el-form
      class="form"
      ref="formEl"
      :model="localFormParams"
      :label-width="labelWidth"
      :style="{ maxWidth: maxWidth }"
      :rules="rules"
    >
      <slot></slot>
      <!-- 动态生成表单项 -->
      <el-form-item
        v-for="(item, index) in itemConfig"
        :key="index"
        :label="item.label"
        :prop="item.prop"
      >
        <el-input v-model="localFormParams[item.field]" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit" :loading="loading">{{ submitText }}</el-button>
        <el-button text @click="channel">{{ cancelText }}</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import { ElMessageBox, ElNotification, type FormInstance } from 'element-plus'
import type { FormItemConfig } from '@/resources/interface/FormItemType'

// 定义组件的 props
const props = defineProps({
  itemConfig: {
    type: Array as () => FormItemConfig[],
    default: () => []
  },
  hasLoading: Boolean,
  visible: Boolean,
  title: {
    type: String,
    default: 'Dialog'
  },
  width: {
    type: String,
    default: '20%'
  },
  closeTips: {
    type: Boolean,
    default: true
  },
  rules: {
    type: Object
  },
  formParams: {
    type: Object,
    required: true
  },
  labelWidth: {
    type: String,
    default: '30%'
  },
  maxWidth: {
    type: String,
    default: '90%'
  },
  submitText: {
    type: String,
    default: '保存'
  },
  cancelText: {
    type: String,
    default: '取消'
  }
})
const formEl = ref<FormInstance>()
const localFormParams = ref<Record<string, any>>({ ...props.formParams })
// 定义事件发射器
const emit = defineEmits(['update:visible', 'submit', 'update:hasLoading'])

// 使用 computed 属性来简化对 visible 的监听和更新
const localVisible = computed({
  get: () => props.visible,
  set: (value) => emit('update:visible', value)
})
const loading = computed({
  get: () => props.hasLoading,
  set: (value) => emit('update:hasLoading', value)
})

const onSubmit = async () => {
  if (!formEl.value) return
  await formEl.value.validate((valid) => {
    loading.value = true
    if (valid) {
      console.log(localFormParams.value)
      emit('submit', localFormParams.value)
    } else {
      ElNotification.error('请填写正确的信息')
      loading.value = false
    }
  })
}

const resetForm = () => {
  if (!formEl.value) return
  formEl.value.resetFields()
}

const channel = () => {
  if (props.closeTips) {
    ElMessageBox.confirm('确定关闭该窗口?', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
      .then(() => {
        resetForm()
        localVisible.value = false // 使用 localVisible 来发射关闭事件
      })
      .catch(() => {
        // 处理取消操作或错误
      })
  }
}
// 关闭对话框时的处理逻辑
const handleClose = (done: () => void) => {
  if (props.closeTips) {
    ElMessageBox.confirm('确定关闭该窗口?', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
      .then(() => {
        resetForm()
        done()
        localVisible.value = false // 使用 localVisible 来发射关闭事件
      })
      .catch(() => {
        // 处理取消操作或错误
      })
  } else {
    done()
  }
}
</script>
